<template>
	<view style="padding: 30rpx;"> 
	<view class="box">
		<JnChart :option="optionLine" @init="handleLineInit" />
	</view>
		
		<view class="userBox" v-for="(item, index) in likes" :key="index" >
			<text>
				你的文章
				<text style="color: blue" @click="goNoteView(item.note_id, item.file)">{{item.title}}</text>
				\n共收到点赞
				<text style="font-weight: bold;">{{item.like_num}}</text>
				次
			</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import JnChart from '@/components/jn-chart/index.vue'
	
	// echarts的配置项
	// 如果option是通过接口数据动态组成，建议给组件加上 lazyLoad 配置
	const optionLine = ref({})
	
	onMounted(getData)
	
	// 模拟从接口获取echarts渲染的数据
	function getData() {
	    let data = {
	      names: [],
	      values: []
	    }
		
		let user = uni.getStorageSync('xm-user');
		
		uni.request({
			url: config.baseUrl + '/note/findByUser?user_id=' + user.id,
			method: 'GET',
			success(res) {
				res.data.forEach(item => {
					data.names.push(item.title);
					data.values.push(item.like_num)
				})				
				optionLine.value = getOptionLine(data)
				console.log(res)
			}	
		})

	    
	}
	
	function getOptionLine(datasource) {
	  const { values, names } = datasource
	  
	  const option = {
	    // 如果图表显示的很小，记得加上grid
	    grid: {
	      top: '5%',
	      left: '5%',
	      right: '5%',
	      bottom: 0,
	      containLabel: true
	    },
	    tooltip: {
	      show: true,
	      trigger: 'axis',
	      confine: true,
	      formatter: (params) => {
	        const { value, name } = params[0]
	        
	        return `${value}\n${name}`
	      }
	    },
	    xAxis: {
	      type: 'category',
	      data: names
	    },
	    yAxis: {
	      type: 'value'
	    },
	    series: [
	      {
	        data: values,
	        type: 'line',
	        smooth: true
	      }
	    ]
	  };
	  
	  return option
	}
	
	/**
	 * echarts 初始化完成监听
	 * @param {Object} chart echarts 实例对象
	 */
	function handleLineInit(chart) {
	  console.debug('@line chart 实例对象 = ', chart)
	  chart.on('click', () => {console.log('点击了line图表')})
	}
</script>

<script>
	import config from '@/config.js';
	import { ref, onMounted } from 'vue';
	import JnChart from '@/components/jn-chart/index.vue';
	
	export default {
		data() {
			return {
				likes:[
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
					{title:"OTTO的大作1", like_num:999, note_id:0, file:''},
				],
				user:[
					
				],
			}
		},
		
		onLoad() {
			this.user = uni.getStorageSync('xm-user');
			let that = this;
			uni.request({
				url: config.baseUrl + '/note/findByUser?user_id=' + this.user.id,
				method: 'GET',
				success(res) {
					that.likes = res.data,
					console.log(res)
				}	
			})
		},
		
		methods: {
			goNoteView(noteId, fileName){
				uni.navigateTo({
					url:'/pages/noteView/noteView?noteId=' + noteId + '&FileName=' + fileName
				})
			},
		}
	}
</script>

<style scoped>
	.userBox {
		display: flex;
		justify-content: flex-start;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
	}
	
	  .box {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
	    height: 460rpx;
		margin-bottom: 5%;
	  }
</style>
